<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-row>
                        <el-form :inline="true" :model="formvo" class="demo-form-inline">
                            <el-form-item label="状态">
                                <el-select v-model="formvo.status" placeholder="请选择" class="custom-select" clearable>
                                    <el-option label="启用" value="0"></el-option>
                                    <el-option label="停用" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            <el-form-item label="角色">
                                <el-select v-model="formvo.roleId" placeholder="请选择" class="custom-select" clearable>
                                    <el-option v-for="role in roleList" :label="role.roleName"
                                        :value="role.id"></el-option>
                                </el-select>
                            </el-form-item>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            <el-form-item label="员工姓名">
                                <el-input v-model="formvo.employeeName"></el-input>
                            </el-form-item>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            <el-form-item label="手机号">
                                <el-input v-model="formvo.phone"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <!-- 按钮 -->
                    <el-row>
                        <el-button style="margin-right: 10px;background-color: #009933;width: 100px;color: white;"
                            @click="findPage()">查询</el-button>
                        <el-button @click="toadd" type="success"
                            style="margin-right: 10px;background-color: #1A87FE;width: 100px;">+新增</el-button>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 展示列表 -->
        <br><br><br>
        <el-table :data="tableData">
            <el-table-column label="序号" prop="id" />
            <el-table-column label="姓名" prop="employeeName" />
            <el-table-column label="手机号" prop="phone" />
            <el-table-column label="员工账号" prop="accountNum" />
            <el-table-column label="员工密码" prop="password" />
            <el-table-column label="人脸图片">
                <template slot-scope="scope">
                    <img :src="scope.row.faceImg" alt="" width="50px" height="50px">
                </template>
            </el-table-column>

            <el-table-column label="IC卡号" prop="icNum" />
            <el-table-column label="角色">
                <template slot-scope="scope">
                    <p class="xiaoshou" style="color: blue;" @click="toRoleList" v-for="role in scope.row.roleNameList">
                        {{ role }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column label="管辖楼栋" width="180px">
                <template slot-scope="scope">
                    <span v-for="buding in scope.row.budingNameList">
                        {{ buding + "栋，" }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.status == 0 ? '启用' : '停用' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否关联运营账号">
                <template slot-scope="scope">
                    <span>{{ scope.row.isnoRele == 0 ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="180">

                <!-- <template slot-scope="scope">
                  <span></span>
                </template> -->
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <span class="pointer" style="color: blue;font-size: 13px;"
                        @click="blockup(scope.row)">{{ scope.row.status==0?'停用':'启用' }}</span>&nbsp;&nbsp;&nbsp;
                    <span class="pointer" style="color: blue;font-size: 13px;"
                        @click="toUpdate(scope.row)">编辑</span>&nbsp;&nbsp;&nbsp;
                    <span class="pointer" style="color: red;font-size: 13px;"
                        @click="delet(scope.row.id)">删除</span>&nbsp;&nbsp;&nbsp;
                    <span class="pointer" @click="content(scope.row.id)" style="color: blue;font-size: 13px;">详情</span>&nbsp;&nbsp;&nbsp;
                    <span class="pointer" style="color: blue;font-size: 13px;">重置密码</span>&nbsp;&nbsp;&nbsp;
                    <span class="pointer" style="color: blue;font-size: 13px;" @click="topermission">门禁权限</span>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formvo.pageNum" :page-sizes="[2, 4, 5, 6, 8]" :page-size="formvo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <!-- 添加或修改员工信息对话框 -->
        <el-dialog :title="form.id == null ? '添加员工' : '修改员工'" :visible.sync="dialogFormVisible" width="600px"
            append-to-body>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <el-form :disabled="false" ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="姓名" prop="employeeName">
                            <el-input v-model="form.employeeName" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" />
                        </el-form-item>
                        <el-form-item label="证件类型">
                            <el-select v-model="form.cardtype" placeholder="请选择" class="custom-select">
                                <el-option v-for="card in cardList" :label="card.cardName" :value="card.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号" prop="cardNum">
                            <el-input v-model="form.cardNum" placeholder="请输入身份证号码" />
                        </el-form-item>
                        <el-form-item label="员工账号" prop="accountNum">
                            <el-input v-model="form.accountNum" placeholder="请输入员工账号" />
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-checkbox-group v-model="form.roleIdList">
                                <el-checkbox v-for="role in roleList" :label="role.id" :name="role.id">{{ role.roleName
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="管辖楼栋">
                            <el-checkbox-group v-model="form.budingIdList">
                                <el-checkbox v-for="buding in budingList" :label="buding.blockNumber" :name="buding.blockNumber">{{ buding.blockNumber + "栋" }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.remarks" placeholder="请输入（限制50字）"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="门禁权限信息" name="second">

                    <el-form :disabled="false" ref="form" :model="form" label-width="80px">

                        <el-form-item label="人脸图片">
                            <div class="upload-container">
                                <el-upload class="avatar-uploader"
                                    action="http://localhost:81/dev-api/employee/employee/uploadfile"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="faceImg" :src="faceImg" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <span class="upload-tip">注意： <br>
                                    1、如果需要下发门禁权限，请上传人脸正面照片，未上传将不能下发门禁权限。</span>
                            </div>
                        </el-form-item>


                        <el-form :disabled="false" ref="form" :model="form" label-width="80px">

                            <el-form-item label="IC卡号：">
                                <el-input v-model="form.icNum" placeholder="请输入ic卡号"></el-input>
                                <!-- <div class="outer-box">
                                    <div v-for="(row, index) in cardcardRows" :key="index" class="row">
                                        <el-row style="margin-bottom: 20px">

                                            <el-input style="margin-left: 15px;width: 500px" v-model="row.startBuilding"
                                                class="building-input" placeholder="请输入：" />
                                            <el-button @click="addRow" v-if="index === 0" class="add-button"
                                                style="background-color: #3399ff;margin-left: 15px; border: 0px; color: white;">
                                                +
                                            </el-button>

                                            <el-button style="margin-left: 15px;" type="danger"
                                                @click="removeRow(index)" v-else class="remove-button">
                                                -
                                            </el-button>
                                        </el-row>
                                    </div>
                                </div> -->
                            </el-form-item>


                        </el-form>

                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="车牌号信息" name="third">


                    <el-form :disabled="false" ref="form" :model="form" label-width="80px">

                        <el-form-item label="车牌号：">
                            <div class="outer-box">
                                <div v-for="(row, index) in cardRows" :key="index" class="row">
                                    <el-row style="margin-bottom: 20px">

                                        <el-input style="margin-left: 15px;width: 500px" v-model="row.startBuilding"
                                            class="building-input" placeholder="请输入车牌号：例如：京A888888" />
                                        <el-button @click="addRow" v-if="index === 0" class="add-button"
                                            style="background-color: #3399ff;margin-left: 15px; border: 0px; color: white;">
                                            +
                                        </el-button>

                                        <el-button style="margin-left: 15px;" type="danger" @click="removeRow(index)"
                                            v-else class="remove-button">
                                            -
                                        </el-button>
                                    </el-row>
                                </div>
                            </div>
                        </el-form-item>


                    </el-form>

                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addOrUpdate">确 定</el-button>
                <el-button @click="diafalse">取 消</el-button>
            </div>
        </el-dialog>


        <!-- 详情页面 -->
        <el-dialog :title="form.id == null ? '添加员工' : '员工详情'" :visible.sync="dialogFormVisible2" width="600px"
            append-to-body>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <el-form disabled="true" ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="姓名" prop="employeeName">
                            <el-input v-model="form.employeeName" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" />
                        </el-form-item>
                        <el-form-item label="证件类型">
                            <el-select v-model="form.cardtype" placeholder="请选择" class="custom-select">
                                <el-option v-for="card in cardList" :label="card.cardName" :value="card.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号" prop="cardNum">
                            <el-input v-model="form.cardNum" placeholder="请输入身份证号码" />
                        </el-form-item>
                        <el-form-item label="员工账号" prop="accountNum">
                            <el-input v-model="form.accountNum" placeholder="请输入员工账号" />
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-checkbox-group v-model="form.roleIdList">
                                <el-checkbox v-for="role in roleList" :label="role.id" :name="role.id">{{ role.roleName
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="管辖楼栋">
                            <el-checkbox-group v-model="form.budingIdList">
                                <el-checkbox v-for="buding in budingList" :label="buding.blockNumber" :name="buding.blockNumber">{{ buding.blockNumber + "栋" }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.remarks" placeholder="请输入（限制50字）"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="门禁权限信息" name="second">

                    <el-form disabled="true" ref="form" :model="form" label-width="80px">

                        <el-form-item label="人脸图片">
                            <div class="upload-container">
                                <el-upload class="avatar-uploader"
                                    action="http://localhost:81/dev-api/employee/employee/uploadfile"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="faceImg" :src="faceImg" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <span class="upload-tip">注意： <br>
                                    1、如果需要下发门禁权限，请上传人脸正面照片，未上传将不能下发门禁权限。</span>
                            </div>
                        </el-form-item>


                        <el-form disabled="true" ref="form" :model="form" label-width="80px">

                            <el-form-item label="IC卡号：">
                                <el-input v-model="form.icNum" placeholder="请输入ic卡号"></el-input>
                                <!-- <div class="outer-box">
                                    <div v-for="(row, index) in cardcardRows" :key="index" class="row">
                                        <el-row style="margin-bottom: 20px">

                                            <el-input style="margin-left: 15px;width: 500px" v-model="row.startBuilding"
                                                class="building-input" placeholder="请输入：" />
                                            <el-button @click="addRow" v-if="index === 0" class="add-button"
                                                style="background-color: #3399ff;margin-left: 15px; border: 0px; color: white;">
                                                +
                                            </el-button>

                                            <el-button style="margin-left: 15px;" type="danger"
                                                @click="removeRow(index)" v-else class="remove-button">
                                                -
                                            </el-button>
                                        </el-row>
                                    </div>
                                </div> -->
                            </el-form-item>


                        </el-form>

                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="车牌号信息" name="third">


                    <el-form disabled="true" ref="form" :model="form" label-width="80px">

                        <el-form-item label="车牌号：">
                            <div class="outer-box">
                                <div v-for="(row, index) in cardRows" :key="index" class="row">
                                    <el-row style="margin-bottom: 20px">

                                        <el-input style="margin-left: 15px;width: 500px" v-model="row.startBuilding"
                                            class="building-input" placeholder="请输入车牌号：例如：京A888888" />
                                        <el-button @click="addRow" v-if="index === 0" class="add-button"
                                            style="background-color: #3399ff;margin-left: 15px; border: 0px; color: white;">
                                            +
                                        </el-button>

                                        <el-button style="margin-left: 15px;" type="danger" @click="removeRow(index)"
                                            v-else class="remove-button">
                                            -
                                        </el-button>
                                    </el-row>
                                </div>
                            </div>
                        </el-form-item>


                    </el-form>

                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { pageEmployee, addEmployee, blockupEmployee, updateEmployee, getEmployeeById,deleteEmployee,contentEmployee} from "@/api/cs/employee";
import { findAllRole } from "@/api/cs/role";
import { findAllCard } from "@/api/cs/card";
import { findAllBuding } from "@/api/cs/buding";
import './employee.css'

export default {
    data() {
        return {
            total: 2,
            formvo: {
                pageNum: 1,
                pageSize: 2,
                roleId: null,
                employeeName: null,
                phone: null,
                status: null
            },
            roleList: [],
            cardList: [],
            budingList: [],
            tableData: [],
            dialogFormVisible: false,
            dialogFormVisible2: false,
            form: {
                budingIdList: [],
                roleIdList: [],
                cheList: [],
            },
            // 表单校验
            rules: {
                employeeName: [
                    { required: true, message: "姓名不能为空", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "手机号不能为空", trigger: "blur" }
                ],
            },
            activeName: 'first',
            faceImg: '',
            cardRows: [{ id: "1", startBuilding: "", endBuilding: "" }],
        }
    },

    methods: {
        content(employeeId) {
            let that = this
            if (employeeId != null) {
                contentEmployee(employeeId).then(res => {
                    that.form.roleIdList = res.data.roleEmpIdList
                    // res.data.cheIdList.forEach(item=>{
                    //     that.cardRows.push(item.id)
                    // })
                    if (res.data.cheIdList.length > 0) {
                        that.cardRows = res.data.cheIdList
                    } else {
                        that.cardRows = [{ id: "1", startBuilding: "", endBuilding: "" }]
                    }
                    that.form = res.data
                    // that.budingList = res.data.budingIdList
                    // that.
                })
            }

            that.dialogFormVisible = true
        },
      delet(employeeId) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteEmployee(employeeId).then(res=>{

                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        toadd() {
            this.disabled = false
            // this.roleList = []
            this.form = {}
            this.form.roleIdList = []
            this.form.budingIdList = []
            this.cardRows = [{ id: "1", startBuilding: "", endBuilding: "" }]
            findAllRole().then(res => {
                this.roleList = res.data
            })
            findAllBuding().then(res=>{
                this.budingList = res.data
            })
            this.dialogFormVisible = true
        },
        toUpdate(row) {
            console.log(row)
            console.log(this.form)
            let that = this
            that.disabled = false
            if (row.id != null) {
                getEmployeeById(row.id).then(res => {
                    that.form.roleIdList = res.data.roleEmpIdList
                    // res.data.cheIdList.forEach(item=>{
                    //     that.cardRows.push(item.id)
                    // })
                    if (res.data.cheIdList.length > 0) {
                        that.cardRows = res.data.cheIdList
                        console.log(that.cardRows)
                        console.log(res.data.cheIdList)
                    } else {
                        that.cardRows = [{ id: "1", startBuilding: "", endBuilding: "" }]
                    }
                    that.form = res.data
                    // that.budingList = res.data.budingIdList
                    // that.
                })
            }

            that.dialogFormVisible = true
        },
        addOrUpdate() {
            let that = this
            console.log(this.form)
            if (that.form.id == null) {
                addEmployee(this.form).then(res => {
                    that.$message.success("添加成功！")
                })
            } else {
                updateEmployee(that.form).then(res => {
                    that.$message.success("修改员工信息成功！")
                })
            }
            that.findPage()
            that.dialogFormVisible = false
        },
        diafalse() {
            this.form = {}
            this.cardRows = [{ id: "1", startBuilding: "", endBuilding: "" }]
            this.dialogFormVisible = false
        },
        findAllBuding() {
            let that = this
            findAllBuding().then(res => {
                that.budingList = res.data
            })
        },
        findAllCard() {
            let that = this
            findAllCard().then(res => {
                that.cardList = res.data
            })
        },
        findAllRole() {
            let that = this
            findAllRole().then(res => {
                that.roleList = res.data
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formvo.pageSize = val
            this.findPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formvo.pageNum = val
            this.findPage()
        },
        findPage() {
            let that = this
            pageEmployee(that.formvo).then(res => {
                that.tableData = res.data.records
                that.total = res.data.total
                that.formvo.pageNum = res.data.current
                that.formvo.pageSize = res.data.size
                console.log(res.data.records)
            })
        },
        //第一个页面
        addRow() {
            const newRow = {
                id: this.cardRows.length + 1,
                startBuilding: "",
                endBuilding: "",
            };
            this.cardRows.push(newRow);
            console.log(this.cardRows)
            this.form.cheList = this.cardRows
            console.log(this.form.cardList)
            this.dialogFormVisible = true
        },
        removeRow(index) {
            this.cardRows.splice(index, 1);
        },
        add() {
            this.items.push({ icCardNumber22: '' });
        },
        remove(index) {
            this.items.splice(index, 1);
        },
        topermission() {

        },

        blockup(row) {
            let that = this
            this.$confirm('确认停用当前员工账号？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                blockupEmployee(row).then(res => {
                    that.findPage()
                })
                this.$message({
                    type: 'success',
                    message: '状态修改成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });

        },
        handleAvatarSuccess(res, file) {
            console.log(res)
            console.log(file)
            console.log(file.raw.name)
            console.log(this.imageUrl = URL.createObjectURL(file.raw))
            this.faceImg = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        toRoleList() {
            this.$router.push("rolelist")
        }


    },


    //在实例化之后
    created() {
        this.findPage()
        this.findAllRole()
        this.findAllCard()
        this.findAllBuding()
    },

}
</script>

<style></style>
